<template>
  <view class="index-page">
    <u-navbar
      title="确认订单"
      :background="{ background: '#111723' }"
      back-icon-color="#fff"
      title-color="#fff"
      :title-bold="true"
      :border-bottom="false"
    ></u-navbar>
    <view class="top-content">
      <u-image
        width="200rpx"
        height="200rpx"
        :src="state.orderObj.commodity_image"
      ></u-image>
      <view class="text">
        <view>{{ state.orderObj.commodity_name || '111' }}</view>
        <view>¥ {{ state.orderObj.price }}</view>
      </view>
    </view>

    <view class="center-content">
      <view> 支付方式</view>
      <u-radio-group v-model="state.paymentMethod" style="display: block">
        <view class="block">
          <view class="child-left">
            <u-image
              width="50rpx"
              height="50rpx"
              src="@/static/images/tixian.png"
            ></u-image>
            <view style="margin-left: 20rpx">余额</view>
          </view>
          <u-radio name="5"> </u-radio>
        </view>

        <view class="block">
          <view class="child-left">
            <u-image
              width="50rpx"
              height="50rpx"
              src="@/static/images/shande.png"
            ></u-image>
            <view style="margin-left: 20rpx">杉德支付</view>
          </view>
          <u-radio name="3"> </u-radio>
        </view>
      </u-radio-group>
    </view>
    <view class="center-content" style="margin-bottom: 50rpx">
      <view> 购买须知</view>
      <view style="display: flex; align-items: center">
        <u-checkbox
          v-model="state.serviceChecked"
          :disabled="false"
          style="margin: 10rpx"
          shape="circle"
          >我已同意</u-checkbox
        >
        <text
          @click="artic"
          style="
            margin-top: -5rpx;
            margin-left: -30rpx;
            color: #007aff;
            font-size: 0.9375rem;
          "
          >《 星藏服务协议》
        </text>
      </view>
    </view>
    <u-button
      class="button"
      :ripple="true"
      size="medium "
      shape="circle"
      :custom-style="state.customStyle"
      @click="payment"
      >立即支付</u-button
    >
    <view v-html="state.nodes" v-if="state.nodes" class="zhifu"></view>
  </view>
</template>
<script setup lang="ts">
import { getOrderDetail, payOrder } from '@/api/modules/homePage'
import { getArticleDetail } from '@/api/modules/user'
import { onLoad } from '@dcloudio/uni-app'
import { reactive } from 'vue'
const state = reactive({
  customStyle: {
    backgroundImage: 'linear-gradient(to right, #7e50d7, #2138cd)',
    color: '#fff'
  },
  paymentMethod: '5',
  content: '',
  order_sn: '', //订单id
  orderObj: {} as any,
  nodes: '',
  type: '', //区分藏品0盲盒1寄售2
  serviceChecked: false //服务须知
})
onLoad((options) => {
  state.type = options.type as string
  state.order_sn = options.orderId as string
  getOrderDetailData()
})
getArticleDetail({ article_id: '2' }).then((result) => {
  state.content = result.data.content
})
//用户协议
const artic = () => {
  uni.navigateTo({
    url: `/pages/webview/index?url=${state.content}&type=2`
  })
}
//立即支付
const payment = () => {
  if (!state.serviceChecked) {
    uni.showToast({
      title: '请阅读并同意星藏服务协议',
      icon: 'error'
    })
    return
  }
  if (state.paymentMethod === '5') {
    uni.navigateTo({
      url: `/pages/payment/balance-payment?order_sn=${state.order_sn}`
    })
    return
  }
  uni.showLoading({
    title: '正在加载',
    mask: true
  })
  payOrder({
    order_sn: state.order_sn,
    pay_type: state.paymentMethod,
    pay_password: ''
  }).then((result) => {
    uni.hideLoading()
    if (state.paymentMethod === '5') {
      uni.showToast({
        title: '支付成功'
      })
      setTimeout(() => {
        uni.navigateBack({
          delta: 1 //返回层数，2则上上页
        })
      }, 1000)
    } else {
      console.log(result)

      state.nodes = result
    }
  })
  // .finally(() => {
  //   uni.hideLoading()
  // })
}
//获取订单详情
const getOrderDetailData = () => {
  getOrderDetail({ order_sn: state.order_sn }).then((result) => {
    state.orderObj = result.data
  })
}
</script>

<style lang="less" scoped>
::v-deep(.u-hairline-border) {
  ::after {
    border: none !important;
  }
}
page {
  background-color: #f3f6fd;
}
.button {
  width: 80%;
  display: flex;
  margin: 0 auto;
}
.center-content {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 25rpx;

  .block {
    margin: 20rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .child-left {
      display: flex;
      align-items: center;
      width: 28%;
      justify-content: flex-start;
    }
  }
}
.top-content {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 25rpx;
  display: flex;
  align-items: center;
  .text {
    margin-left: 25rpx;
    line-height: 100rpx;
  }
}
.zhifu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11;
  > view {
    position: absolute;
    width: 576rpx;
    height: 310rpx;
    background: #232625;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }
  .title {
    color: #fff;
    text-align: center;
    margin-top: 20rpx;
  }
  .list {
    overflow: hidden;
    margin-top: 50rpx;
    image {
      width: 60rpx;
      height: 60rpx;
      float: left;
      margin-left: 30rpx;
    }
    > view {
      float: left;
      color: #fff;
      margin-left: 20rpx;
      margin-top: 5rpx;
    }
    image:last-child {
      float: right;
      margin-right: 20rpx;
      width: 28rpx;
      height: 28rpx;
      margin-top: 15rpx;
    }
  }
  button {
    width: 90%;
    background: linear-gradient(#ffd279, #f6bf50);
    border: none;
    color: #fff;
    margin: 0 auto;
    margin-top: 20rpx;
    border-radius: 50rpx;
  }
}
</style>
